<!-- 
  computed()
    使用该函数，创建一个计算属性的数据。

    语法：
      1. const resp = computed(get函数)
      2. const resp = computed({
            get() {},

            set() {}
         })

      resp 就是一个计算属性的值，通过 get 函数返回的内容。
          1. 它也是一个 ref 类型的值  { value: xxxx }
          2. 它是只读的              readonly

 -->

<template>
  <div>
    <h1>computed</h1>
    <p>{{ msg }}</p>
    <p>{{ reverseMsg }}</p>
    <p>{{ reverseMsg }}</p>
    <p>{{ reverseMsg }}</p>
    <p>{{ reverseMsg }}</p>
    <p>{{ reverseMsg }}</p>
    <p>{{ reverseMsgReverse }}</p>

    <button @click="fn1">直接修改计算属性 reverseMsg</button>
  </div>
</template>

<script>
import { computed, ref } from 'vue'

export default {
  setup() {
    const msg = ref('hello')
    
    // const reverseMsg = computed(() => {
    //   console.log('reverseMsg')
    //   return msg.value.split('').reverse().join('')
    // })

    const reverseMsg = computed({
      get() {
        return msg.value.split('').reverse().join('')
      },

      set(value) {
        console.log('set value', value)
        // 修改它的依赖项，间接修改它
        msg.value = value.split('').reverse().join('')
      }
    })

    const reverseMsgReverse = computed(() => {
      return reverseMsg.value.split('').reverse().join('')
    })

    // console.log(reverseMsg)

    function fn1() {
      reverseMsg.value = '张三'
    }

    return {
      msg,
      reverseMsg,
      reverseMsgReverse,
      fn1
    }
  }
}
</script>
